<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="middle">
        <div class="menu">
            <li class="item" id="profile">
                <a class="btn" href="#profile"><i class="far fa-user"></i>Profile</a>
                <div class="smenu">
                    <a href="#">Posts</a>
                    <a href="#">Picture</a>
                </div>
            </li>

            <li class="item" id="message">
                <a class="btn" href="#message"><i class="far fa-envelope"></i>Messages</a>
                <div class="smenu">
                    <a href="#">New</a>
                    <a href="#">Sent</a>
                    <a href="#">Spam</a>
                </div>
            </li>

            <li class="item" id="setting">
                <a class="btn" href="#setting"><i class="fas fa-cog"></i>Settings</a>
                <div class="smenu">
                    <a href="#">Password</a>
                    <a href="#">Language</a>
                </div>
            </li>

            <li class="item">
                <a class="btn" href="#"><i class="fas fa-sign-out-alt"></i>Logout</a>
            </li>
        </div>
    </div>
</body>
</html>